<template>
    <van-tabbar class="app-footer" v-model="active" v-if="$route.meta.showTabbar">
      <van-tabbar-item icon="home" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="points-mall" to="culture">文化</van-tabbar-item>
      <van-tabbar-item icon="cart"to="car">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact" to="user">我的</van-tabbar-item>
    </van-tabbar>
   
</template>
<script>
// import { Tabbar, TabbarItem } from 'vux'
import { Tabbar, TabbarItem } from 'vant';
export default {
  name:'AppFooter',
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  data () {
    return {
      active:0,
    }
  },
  watch: {
    path (path) {
      this.getActive(path)
    }
  },
  computed:{
      path(){
        return this.$store.getters.route.path
      }   
  },
  methods:{
    getActive(path){
      if (path === '/') {
        this.active=0
      }else if(path === '/culture'){
        this.active=1
      }else if(path === '/car'){
        this.active=2
      }else if(path === '/user'){
        this.active=3
      }
    }
  },
  mounted(){
    this.getActive(this.$store.getters.route.path);
  }
}
</script>

<style lang="less">
div.app-footer{
  background-color:#1c2e3d;
  .van-tabbar-item{color:#fff;

    &.van-tabbar-item--active{color:#fff100}
  }
  &.van-hairline--top-bottom::after{border-color:#1c2e3d;}
}
</style>
